<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.1.0/mqttws31.min.js" type="text/javascript"></script> -->
    <script src="js/paho.mqtt/paho-mqtt.js" type="text/javascript"></script>
    <title>websocket</title>

    <script type="text/javascript">
        client = new Paho.Client("127.0.0.1", Number(8083), "WebClient");//建立客户端实例
        function MqttConnect() {
            client.connect({ onSuccess: onConnect });//连接服务器并注册连接成功处理事件
            function onConnect() {   // 连接成功的回调函数
                console.log("onConnected");
                client.subscribe("GW001-highde-gateway");//订阅主题
                client.subscribe("GW002-highde-gateway");//订阅主题
                client.subscribe("GW003-highde-gateway");//订阅主题
                client.subscribe("GW004-highde-gateway");//订阅主题
                client.subscribe("GW005-highde-gateway");//订阅主题
                client.subscribe("GW006-highde-gateway");//订阅主题
                client.subscribe("GW007-highde-gateway");//订阅主题
                client.subscribe("GW008-highde-gateway");//订阅主题
                client.subscribe("GW009-highde-gateway");//订阅主题
                client.subscribe("GW001-highde-cloud");//订阅主题
                client.subscribe("GW002-highde-cloud");//订阅主题
                client.subscribe("GW003-highde-cloud");//订阅主题
                client.subscribe("GW004-highde-cloud");//订阅主题
                client.subscribe("GW005-highde-cloud");//订阅主题
                client.subscribe("GW006-highde-cloud");//订阅主题
                client.subscribe("GW007-highde-cloud");//订阅主题
                client.subscribe("GW008-highde-cloud");//订阅主题
                client.subscribe("GW009-highde-cloud");//订阅主题
            }

        }


        client.onConnectionLost = onConnectionLost;//注册连接断开处理事件
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject.errorMessage);
                console.log("连接已断开");
                client.connect({ onSuccess: onConnect });//连接服务器并注册连接成功处理事件
            }
        }

        //接收消息
        client.onMessageArrived = onMessageArrived;//注册消息接收处理事件
        function onMessageArrived(message) {
            var str = "";
            var now = new Date();
            var nowStr = "" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + "." + now.getMilliseconds();
            //console.log("收到消息:"+message.payloadString);
            str = message.topic + ":" + nowStr + "收到消息:"
            for (var i = 0; i < message.payloadBytes.length; i++) {
                s = message.payloadBytes[i].toString(16)
                if (s.length == 1)
                    s = "0" + s;
                str = str + " 0x" + s;
            }
            str = str
            var ul = document.getElementById("demo");
            var li = document.createElement("li");
            if(message.topic.indexOf("cloud") >= 0)
                li.style.background = "#FF0000";
            else
                li.style.background = "#00FFFF";
            li.innerHTML = str;
            if(ul.children.length > 0)
                ul.insertBefore(li, ul.children[0]);
            else
                ul.appendChild(li);
            if (ul.children.length > 20)
                ul.removeChild(ul.children[ul.children.length - 1])
            console.log(str);
        }
        //发送消息
        /*message = new Paho.Message("hello");
        message.destinationName = "rain";
        try {
            client.send(message);
        } catch (error) {
            console.log(error.message);
        }*/
    </script>

</head>

<body>
    <div id="sse">
        <button onclick="javascript:MqttConnect()">开始监听</button>
        <!--<a href="javascript:MqttConnect()">开始监听</a>-->
        <ul id="demo"></ul>
    </div>

</body>

</html>